<!-- 我的-实名认证 -->
<template>
	<view class="page-box">
		<view class="page-main-box">
			<text>{{'实名认证信息'}}</text>
			<view class="form-box">
				<view class="form-box-item">
					<text>真实姓名</text>
					<view>
						<uni-easyinput v-model.trim="formData.name" :inputBorder="false" placeholder="请输入真实姓名"
							placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}"></uni-easyinput>
					</view>
				</view>
				<view class="form-box-item">
					<text>身份证号码</text>
					<view>
						<uni-easyinput v-model.trim="formData.idCard" type="idcard" :inputBorder="false"
							placeholder="请输入身份证号码" placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}">
						</uni-easyinput>
					</view>
				</view>
			</view>
			<view class="form-btn" @tap="handleSubmit()">提交</view>
		</view>
	</view>
</template>

<script>
	import cookie from '@/utils/cookie.js'
	import {
		getDetectAuth,
		getDetectInfoEnhanced
	} from '@/api/user.js'
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	
	
	import text from '@/utils/test.js'
	
	
	export default {
		name: 'wallet',
		data() {
			return {
				formData: {
					name: '',
					idCard: '',
					redirectUrl: `$${this.$baseURL}api/#/pages/artist/certification`
				}
			};
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin', 'zfbInfo', 'yhkInfo']),
		},
		async onLoad() {},
		
		
		async onShow() {
			const {
				BizToken: bizToken = null
			} = this.$qs.parse(window.location.search.substr((1)))
			
			let certificationInfo = cookie.get('certificationInfo')
			
			if (certificationInfo) {
				let certificationInfo2 = JSON.parse(certificationInfo)
	
				Object.assign(this.formData, {
					name: certificationInfo2.name,
					idCard: certificationInfo2.idCard
				})
			}
			
			if (bizToken) {
				this.$public.showLoading(true)
				
				const res = await getDetectInfoEnhanced({bizToken})
				
				this.$public.showLoading(false)
				
				if (res.code !== 200) {
					this.$public.showText(res.msg || '请求失败')
					return
				}
				
				if (!res.data.comparestatus) {
					this.$public.showText('认证成功')
					this.setUserInfo({
						isCertification: 1
					})
					cookie.remove('certificationInfo')
					await this.getUserInfo()
					
					window.location.replace(
						`$${this.$baseURL}api/#/pages/my/index`)
				} else {
					this.$public.showText(res.data.comparemsg || '认证失败')
				}
				
			}
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations('home',['setAttestationUrl']),
			...mapMutations(['setUserInfo']),
			
			
			/**
			 * 发起实名认证
			 */
			async handleSubmit() {
				
				if(!this.verifyForm()){
					return
				}
				
				this.$public.showLoading(true,'正在处理中')
				
				const res = await getDetectAuth(this.formData)
				
				this.$public.showLoading(false)
				
				if(res.code !== 200){
					this.$public.showText(res.msg || '实名验证失败')
					return
				}
				
				cookie.set('certificationInfo', JSON.stringify({
					name: this.formData.name,
					idCard:this.formData.idCard
				}))
				
				this.$public.showText('认证成功')
				
				// #ifdef H5
				location.href = res.data.url
				// #endif
				
				
				//#ifdef MP-WEIXIN
				
				this.setAttestationUrl(res.data.url)
				uni.navigateTo({
					url:'/pages/me/certification/attestationView',
				})
				//#endif
			},
			
			
			/**
			 * 校验表单
			 */
			verifyForm(){
				
				// 寻找没有填写的
				let str = ''
				for(let key in this.formData){
					let item = this.formData[key]
					
					
					if(item === ''){
						switch (key){
							case 'name': str = '请输入真实姓名'
							break;
							case 'idCard': str = '请输入身份证号码'
							break;
						}
					}else{
						if(key === 'idCard'){
							str = text.idCard(item) ? '' : '请输入正确的身份证号码'
						}
					}
					
					// 如果不是空,那就跳出循环
					if(str !== ""){
						break
					}
										
				}
				
				
				if(str === ''){
					return true
				}else{
					this.$public.showText(str)
					return false
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.page-box {
		position: relative;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) 0%, rgba(202, 191, 192, 0) 100%);
		min-height: 100vh;


		.bank-box {
			display: flex;

			&>view {
				position: relative;
				width: 604rpx;
				height: 308rpx;
				box-sizing: content-box;
				// padding: 30rpx 32rpx;
				color: #FDF3F3;
				margin-right: 16rpx;
				flex-shrink: 0;

				&>view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: absolute;
					padding: 30rpx 32rpx;
					width: 100%;
					box-sizing: border-box;
					height: 100%;
					top: 0;
					z-index: 33;

					.bbbb {
						display: flex;
						flex-direction: column;

						&>view {
							font-size: 24rpx;
							margin-bottom: 20rpx;
							display: flex;

							&>text {
								margin-right: 16rpx;
							}
						}

						&>text {

							font-size: 48rpx;
						}
					}
				}

				image {
					position: relative;
					z-index: 2;
				}
			}
		}

		.page-main-box {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			display: flex;
			flex-direction: column;
			padding-top: 60rpx;
			align-items: center;

			&>text {
				color: #0F0F0F;
				font-size: 36rpx;
				font-weight: bold;
				align-self: flex-start;
				margin-bottom: 32rpx;
			}
		}

		.bank-bg {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 604rpx;
			height: 308rpx;
			position: relative;
			margin-bottom: 48rpx;

			text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #8C8A8A;
				font-size: 36rpx;
			}
		}

		.form-box {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(210, 211, 213, 0.5);
			border-radius: 40rpx;
			padding: 32rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.form-box-item {
				display: flex;
				align-items: center;
				padding: 12rpx 0;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

				&:last-child {
					border: 0;
				}

				&>text {
					width: 180rpx;
					color: #0F0D21;
					font-size: 28rpx;
				}

				&>view {
					flex: 1;

				}
			}

			.text-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: #8C8A8A;
				font-size: 28rpx;
			}
		}

		.form-btn {
			margin-top: 48rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
			border-radius: 44rpx;
			color: #FFFFFF;
			opacity: 1;
		}

		::v-deep .uni-easyinput__content-input {
			height: 60rpx !important;
			padding-left: 0 !important;
		}
	}
</style>